<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.red{
			color: red;
		}
		*{
			font-size: 24px;
			color: blue;
		}
		.max{
			font-size: 40px;
			color: green;
		}

	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			
			$(window).keypress(function(event) {
				// console.log(event);
				// console.log(String.fromCharCode(event.keyCode));
				key = event.keyCode || event.charCode || event.which;

				// console.log(key);return;

				word = String.fromCharCode(key);

				text = $('.text').text();

				if(word==text[0]){

					$('.max').text(word);

					setTimeout(run,100);
					newText = text.slice(1, text.length);

					$('.text').text(newText);

				}else{
					alert('输入有错误');
				}
			});

			function run() {
				$('.max').text('');
				$('.red').text($('.red').text()+word);
			}

		})
	</script>

</head>
<body>
	<span class="red"></span><span class="max"></span><span class="text">It provides free instant free Chinese, English, Japanese, Korean, French, Russian, Spanish, Portuguese, Vietnamese full text translation, web translation, and document translation services.</span>
</body>
</html>